<template>
  <div class="pb50" v-loading="loading">
    <!--内容-->
    <div class="product-content">
      <!--基本信息-->
      <div class="common-form">基本信息</div>

      <el-descriptions :column="4" border>
        <el-descriptions-item label="订单号" label-align="right">{{ detail.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="订单类型" label-align="right">{{ detail.orderSourceText }}</el-descriptions-item>
        <el-descriptions-item label="买家" label-align="right">{{ detail.nickName }}</el-descriptions-item>
        <el-descriptions-item label="提货方式" label-align="right">{{ detail.deliveryTypeText }}</el-descriptions-item>
        <el-descriptions-item label="总价(优惠前)" label-align="right">{{ detail.totalPrice }}</el-descriptions-item>
        <el-descriptions-item label="总价(优惠后)" label-align="right">{{ detail.orderPrice }}</el-descriptions-item>
        <el-descriptions-item label="优惠券抵扣金额" label-align="right">{{ detail.couponMoney }}</el-descriptions-item>
        <el-descriptions-item label="积分抵扣金额" label-align="right">{{ detail.pointsMoney }}</el-descriptions-item>
        <el-descriptions-item label="尾款(元)" label-align="right">{{ detail.finalPrice }}</el-descriptions-item>
        <el-descriptions-item label="定金(元)" label-align="right">{{ detail.depositPrice }}</el-descriptions-item>
        <el-descriptions-item label="包装费(元)" label-align="right">{{ detail.packPrice }}</el-descriptions-item>
        <el-descriptions-item label="城市" label-align="right">{{ detail.city }}</el-descriptions-item>
        <el-descriptions-item label="详细地址" label-align="right">{{ detail.adressDetail }}</el-descriptions-item>
        <el-descriptions-item label="收货人名称" label-align="right">{{ detail.extractName }}</el-descriptions-item>
        <el-descriptions-item label="联系方式" label-align="right">{{ detail.extractPhone }}</el-descriptions-item>
        <el-descriptions-item label="订单状态" label-align="right">{{ detail.orderStatusText }}</el-descriptions-item>
        <el-descriptions-item label="订单链接" label-align="right">{{ detail.urlLink }}</el-descriptions-item>
      </el-descriptions>

      <div class="table-wrap">
        <el-row>
          <!-- ywyxgShow 修改订单显示 修改内容 -->
          <el-col :span="24" v-if="pageType == 'tz'">
            <span class="gray9"><span style="color: red;">*</span> 修改的内容：</span>
            <el-input style="width: 90%;margin-top:20px;" type="textarea" :rows="2" maxlength="500" show-word-limit placeholder="请输入修改内容" v-model="remark">
            </el-input>
          </el-col>
        </el-row>
      </div>

      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="商品信息" name="sp">
          <div class="common-form mt16">商品信息</div>
          <div class="table-wrap">
            <div style="display: flex;justify-content: space-between;align-items: center;">
              <div v-if="pageType == 'tz'">
                <!-- 优惠券信息 -->
                <!-- couponTypeText	优惠券类型(10满减券 20折扣券 30核销券 40商品券 50购买券 60充值券) -->
                选择优惠券： <el-select @change="selCouponType" style="width: 200px;" v-model="detail.userCouponId" placeholder="请选择">
                  <el-option v-for="item in couponList" :key="item.userCouponId" :label="item.name" :value="item.userCouponId">
                    <div style="float: left">
                      {{ item.name }}
                    </div>
                    <span style="margin-left: 10px; float: right; color: #8492a6; font-size: 13px">
                      <el-tag size="mini">
                        {{ item.couponTypeText }}
                      </el-tag>
                    </span>
                  </el-option>
                </el-select>
              </div>
              <el-button style="margin:5px 0px;" v-if="pageType == 'tz'" @click="onSpSelect" type="primary" :disabled="slEdit">选择商品</el-button>
            </div>
            <el-table size="small" v-loading="tabLoading" :data="detail.productList" border style="width: 100%">
              <el-table-column prop="imagePath" label="封面" align="center">
                <template #default="scope">
                  <center>
                    <img @click="viewImg1(scope.row)" v-if="scope.row.imagePath" :src="scope.row.imagePath" style="width:45px;height:45px;border-radius:5px;" />
                  </center>
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="标题" width="280"></el-table-column>
              <el-table-column prop="productAttr" label="规格属性" width="280"></el-table-column>
              <el-table-column prop="productNo" label="商品编码" width="150"></el-table-column>
              <el-table-column prop="minBuyCount" label="最小起订数量" width="130">
              </el-table-column>
              <!-- 10-销售 20-赠品 30-赔付 -->
              <!-- <el-table-column prop="orderProductType" label="商品类型" width="90">
                <template #default="scope">{{ scope.row.orderProductType == 10 ? '销售' : scope.row.orderProductType ==
                  20 ? '赠品' : scope.row.orderProductType == 30 ? '赔付' : '' }}</template>
              </el-table-column> -->
              <el-table-column prop="orderProductType" label="商品类型" width="130">
                <template #default="scope">
                  <el-select @change="selCoupon" :disabled="slEdit" v-model="scope.row.orderProductType" placeholder="请选择商品类型">
                    <el-option :label="item1.name" :value="item1.id" v-for="(item1, index1) in orderProductTypeList" :key="index1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="gmsl" label="购买数量" v-auth="'/order/order/xgsl'" width="130">
                <template #default="scope">
                  <el-input-number @change="selCoupon" :disabled="slEdit" :min="scope.row.minBuyCount" :controls="false" style="width: 90%;" v-model="scope.row.gmsl"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="remark" label="备注" width="180">
                <template #default="scope">
                  <el-input type="textarea" placeholder="请输入内容" :disabled="slEdit" maxlength="100" show-word-limit style="width: 90%;" v-model="scope.row.remark"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="couponPrice" label="优惠金额" width="90">
                <template #default="scope">￥{{ scope.row.couponPrice || '0.00' }}</template>
              </el-table-column>
              <el-table-column prop="depositRatio" label="定金比例" v-auth="'/order/order/xgsl'" width="90">
              </el-table-column>
              <el-table-column prop="depositPrice" label="定金价格" v-auth="'/order/order/xgsl'" width="90">
              </el-table-column>
              <el-table-column prop="finalPrice" label="尾款" width="90">
                <template #default="scope">￥{{ scope.row.finalPrice || '0.00' }}</template>
              </el-table-column>
              <el-table-column prop="packagePrice" label="包装费" width="90">
                <template #default="scope">￥{{ scope.row.packagePrice || '0.00' }}</template>
              </el-table-column>
              <el-table-column prop="productPrice" label="商品金额" width="90">
                <template #default="scope">￥{{ scope.row.productPrice || '0.00' }}</template>
              </el-table-column>
              <el-table-column prop="totalPayPrice" label="总金额" width="90">
                <template #default="scope">￥{{ scope.row.totalPayPrice || '0.00' }}</template>
              </el-table-column>
              <el-table-column prop="expectDeliveryTime" label="预计发货日期" width="150"></el-table-column>
              <el-table-column prop="productAddress" label="生产部门" width="100"></el-table-column>
              <el-table-column prop="deliveryNum" label="已发货数量" width="100"></el-table-column>
              <el-table-column prop="sysl" label="剩余发货数量" width="130">
                <template #default="scope">{{ Number(scope.row.totalNum) - Number(scope.row.deliveryNum) }}</template>
              </el-table-column>
              <el-table-column v-if="pageType == 'tz'" prop="ctl" label="操作" fixed="right" width="100">
                <template #default="scope">
                  <el-button type="danger" @click="handlerRemove(scope.$index)">移除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 赠品 -->
            <div class="common-form mt16" v-if="giftProduct && giftProduct.length">赠品信息</div>
            <el-table v-if="giftProduct && giftProduct.length" size="small" :data="giftProduct" border style="width: 100%" stripe>
              <el-table-column prop="imagePath" label="商品图片">
                <template #default="scope">
                  <img :src="scope.row.imagePath || scope.row.skuVo.imagePath" style="width: 60px ; height:60px" />
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="赠品名称"></el-table-column>
              <el-table-column label="规格">
                <template #default="scope">
                  {{ scope.row.productAttr || scope.row.skuVo.productAttr }}
                </template>
              </el-table-column>
              <el-table-column prop="buyNum" label="赠送数量"></el-table-column>
              <el-table-column prop="produceAddress" label="生产基地">
                <template #default="scope">
                  {{ scope.row.produceAddress }}
                </template>
              </el-table-column>
            </el-table>
            <!-- 修改后订单信息 -->
            <div v-if="pageType == 'tz' && JSON.stringify(CalcData) != '{}'" class="common-form mt16">新订单信息</div>
            <el-row v-if="pageType == 'tz' && JSON.stringify(CalcData) != '{}'" justify=center :gutter="30"
              class="calc-data-css">
              <el-col span="3">
                <span>优惠金额:</span>￥{{ CalcData.couponPrice || '0.00' }}
              </el-col>
              <el-col span="3">
                <span>定金:</span>￥{{ CalcData.depositTotalPrice || '0.00' }}
              </el-col>
              <el-col span="3">
                <span>尾款:</span>￥{{ CalcData.finalTotalPrice || '0.00' }}
              </el-col>
              <el-col span="3">
                <span>包装费:</span>￥{{ CalcData.packagePrice || '0.00' }}
              </el-col>
              <el-col span="3">
                <span>总金额:</span>￥{{ CalcData.totalPrice || '0.00' }}
              </el-col>
              <el-col span="3">
                <span>优惠后总金额:</span>￥{{ CalcData.orderPayPrice || '0.00' }}
              </el-col>
              <el-col span="3">
                <span>补交定金金额:</span>￥{{ CalcData.restockDepositPrice || '0.00' }}
              </el-col>
              <el-col span="3">
                <span>退款金额:</span>￥{{ CalcData.refundPrice || '0.00' }}
              </el-col>
            </el-row>
          </div>

          <div class="common-form mt16">抵扣券使用明细</div>
          <div class="table-wrap">
            <el-table size="small" :data="detail.userCouponList" border style="width: 100%" stripe>
              <el-table-column prop="couponId" label="ID"></el-table-column>
              <el-table-column prop="name" label="抵扣券标题"></el-table-column>
              <el-table-column prop="couponTypeText" label="抵扣券类型"></el-table-column>
              <el-table-column prop="minPrice" label="抵扣券最小适用金额"></el-table-column>
              <el-table-column prop="reducePrice" label="抵扣金额"></el-table-column>
              <el-table-column prop="useTime" label="使用时间"></el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane name="fk">
          <template #label>
            <el-badge :value="detail.billAudit ? '审' : ''" class="item">
              <div>付款记录</div>
            </el-badge>
          </template>
          <!-- <div class="common-form mt16">付款单</div> -->
          <!-- <div class="table-wrap"> -->
          <el-table size="small" :data="detail.orderBillList" border style="width: 100%" stripe>
            <!-- <el-table-column prop="orderId" label="订单ID" fixed="left"></el-table-column> -->
            <el-table-column prop="billNo" label="账单号"></el-table-column>
            <el-table-column prop="payFilePath" width="130" label="支付凭证">
              <template #default="scope">
                <img @click="viewImg(scope.row)" v-if="scope.row.payFilePath" :src="scope.row.payFilePath" style="width: 60px;height:60px;" />
              </template>
            </el-table-column>
            <!-- UNCONFIRM("未确认",10),
            AUDITING("审批中",20),
            CONFIRMED("已确认",30); -->
            <el-table-column prop="status" label="确认状态">
              <template #default="scope">
                {{ scope.row.status == 10 ? '未确认' : scope.row.status == 30 ? '已确认' : scope.row.status == 20 ? '审批中' : ''
                }}
              </template>
            </el-table-column>
            <el-table-column prop="confirmTime" label="确认时间"></el-table-column>
            <el-table-column prop="billAmount" label="账单金额">
              <template #default="scope">
                ￥{{ scope.row.billAmount || '0.00' }}
              </template>
            </el-table-column>
            <!-- DEPOSIT("定金", 1),
AFTER_DEPOSIT("补交定金", 2),
FINAL("尾款", 3); -->
            <el-table-column prop="billType" label="类型">
              <template #default="scope">
                {{ scope.row.billType == 1 ? '定金' : scope.row.billType == 2 ? '补交定金' : '尾款' }}
              </template>
            </el-table-column>

            <!-- BALANCE("余额支付", 10),
WECHAT("微信支付", 20),
ALIPAY("支付宝支付", 30),
OFFLINE("线下支付",40),
BALANCE_WECHAT("余额微信组合支付",50); -->
            <el-table-column prop="payType" label="支付方式">
              <template #default="scope">
                {{ scope.row.payType == 10 ? '余额支付' : scope.row.payType == 20 ? '微信支付' : scope.row.payType == 30
                  ? '支付宝支付' : scope.row.payType == 40 ? '线下支付' : scope.row.payType == 50 ? '余额微信组合支付' : ''
                }}
              </template>
            </el-table-column>
            <!-- PENDING("待付款", 10),
SUCCESS("已付款", 20),
PAYING("支付中",30); -->
            <el-table-column prop="payStatus" label="支付状态">
              <template #default="scope">
                <el-tag v-if="scope.row.payStatus"
                  :type="scope.row.payStatus == 10 || scope.row.payStatus == 40 ? 'danger' : ''"> {{
                    scope.row.payStatus == 10 ? '待付款' :
                      scope.row.payStatus == 20 ? '已付款' : scope.row.payStatus == 30 ? '支付中' : '已关闭'
                  }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="payTime" label="支付时间"></el-table-column>
            <el-table-column prop="billRemark" label="账单备注"></el-table-column>
            <el-table-column prop="ctl" label="操作" fixed="right" width="150">
              <template #default="scope">
                <el-button v-if="scope.row.status == 10 && scope.row.payType == 40" type="primary"
                  @click="uploadCredentials(scope.row)" v-loading="scope.row.rowLoading">上传凭证</el-button>
                <el-button v-if="scope.row.auditBtn" type="primary" @click="rowOrderAudit(scope.row)"
                  v-loading="scope.row.rowLoading">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- </div> -->
        </el-tab-pane>
        <el-tab-pane label="发货记录" name="fh">

          <!-- <div class="common-form mt16">出库单</div> -->
          <!-- <div class="table-wrap"> -->
          <el-table size="small" :data="detail.deliveryList" border style="width: 100%" stripe>
            <el-table-column prop="deliveryNo" label="发货单号"></el-table-column>
            <el-table-column prop="deliveryTime" label="发货时间"></el-table-column>
            <el-table-column prop="deliveryCount" label="发货总数量"></el-table-column>
            <el-table-column prop="deliveryAmount" label="发货总金额">
              <template #default="scope">
                ￥{{ scope.row.deliveryAmount || '0.00' }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="发货状态">
              <!-- AUDITING("审核中", 10),
UNPAYMENT("待付款", 20),
PAY_AUDIT("付款审批", 30),
WAIT_TAKE("待提货", 40),
ALREADY_TAKE("已提货", 50),
AUDIT_REFUSE("审批拒绝",60),
CANCEL("已取消",70), -->
              <template #default="scope">
                <el-tag v-if="scope.row.status"
                  :type="scope.row.status == 10 || scope.row.status == 60 || scope.row.status == 70 ? 'danger' : ''"> {{
                    scope.row.status == 10 ? '审核中' :
                      scope.row.status == 20 ? '待付款' : scope.row.status == 30 ? '付款审批' : scope.row.status == 40 ? '待提货' :
                        scope.row.status == 50 ? '已提货' : scope.row.status == 60 ? '审批拒绝' : scope.row.status == 70 ? '已取消' : ""
                  }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="deliveryName" label="发货人"></el-table-column>
            <el-table-column prop="ctl" label="操作" fixed="right" width="130">
              <template #default="scope">
                <el-button type="primary" @click="fhDetails(scope.row)"
                  v-loading="scope.row.rowLoading">发货详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- </div> -->
        </el-tab-pane>
        <el-tab-pane label="退款记录" name="tk">
          <el-table size="small" :data="detail.refundList" border style="width: 100%" stripe>
            <el-table-column prop="refundNo" label="退款单号" fixed="left"></el-table-column>
            <el-table-column prop="source" label="退款类型">
              <template #default="scope">
                <!-- 10-用户发起  20-业务员发起  30-财务发起 -->
                {{ scope.row.source == 10 ? '用户发起' : scope.row.source == 20 ? '业务员发起' : scope.row.source == 30
                  ? '财务发起' : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="applyName" label="退款人"></el-table-column>
            <el-table-column prop="createTime" label="退款时间"></el-table-column>
            <el-table-column prop="applyDesc" label="退款原因"></el-table-column>
            <el-table-column prop="refundMoney" label="退款金额">
              <template #default="scope">
                ￥{{ scope.row.refundMoney || '0.00' }}
              </template>
            </el-table-column>
            <el-table-column prop="applyPrice" label="申请退款金额">
              <template #default="scope">
                ￥{{ scope.row.applyPrice || '0.00' }}
              </template>
            </el-table-column>
            <el-table-column prop="backType" label="退款方式">
              <template #default="scope">
                <!-- 10-原路退回  20-余额退回 -->
                {{ scope.row.backType == 10 ? '原路退回' : scope.row.backType == 20 ? '余额退回' : scope.row.backType ==
                  30 ? '银行转账' : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="statusText" label="退款状态">
              <template #default="scope">
                {{ scope.row.statusText }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="bg">
          <template #label>
            <el-badge :value="detail.modifyAudit ? '审' : ''" class="item">
              <div>变更记录</div>
            </el-badge>
          </template>
          <!-- <div class="common-form mt16">变更记录</div> -->
          <!-- <div class="table-wrap"> -->
          <el-table size="small" :data="detail.modifyList" border style="width: 100%;" stripe>
            <el-table-column prop="modifyNo" label="变更单号" width="100" fixed="left"></el-table-column>
            <el-table-column prop="createTime" label="变更时间" width="100" fixed="left"></el-table-column>
            <el-table-column prop="modifyName" label="变更人" width="90" fixed="left"></el-table-column>
            <el-table-column prop="remark" width="150" label="修改内容"></el-table-column>
            <el-table-column prop="auditStatus" width="100" label="审批状态">
              <template #default="scope">
                <el-tag @click="auditBtnDetails(scope.row)"
                  :type="scope.row.auditStatus == 0 || scope.row.auditStatus == 1 || scope.row.auditStatus == 3 ? 'danger' : ''">
                  {{ scope.row.auditStatus == 0 ? '审核中' : scope.row.auditStatus == 1 ? '拒绝' : scope.row.auditStatus == 2
                    ? '同意' : scope.row.auditStatus == 3 ? '已取消' : '' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="depositTotalPrice" width="100" label="定金">
              <template #default="scope">
                ￥ {{ scope.row.depositTotalPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="finalTotalPrice" width="100" label="尾款">
              <template #default="scope">
                ￥ {{ scope.row.finalTotalPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="totalPrice" width="100" label="订单总金额">
              <template #default="scope">
                ￥ {{ scope.row.totalPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="orderPayPrice" width="130" label="优惠后总金额">
              <template #default="scope">
                ￥ {{ scope.row.orderPayPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="restockDepositPrice" width="100" label="补交定金">
              <template #default="scope">
                ￥ {{ scope.row.restockDepositPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="refundPrice" width="100" label="退款金额">
              <template #default="scope">
                ￥ {{ scope.row.refundPrice }}
              </template>
            </el-table-column>
            <el-table-column prop="totalNum" label="总数量" width="90" fixed="left"></el-table-column>
            <el-table-column prop="ctl" label="操作" fixed="right" width="160">
              <template #default="scope">
                <!-- <el-button type="danger" v-if="scope.row.orderStatus && scope.row.orderStatus != '20'" link
                  @click="cancelRow(scope.row)">关闭</el-button> -->
                <el-button type="primary" link @click="auditBtnDetails(scope.row)">详情</el-button>
                <el-button type="primary" link @click="historyDetails(scope.row)">历史记录</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- </div> -->
        </el-tab-pane>
        <el-tab-pane label="订单评价" name="pj">
          <!-- <div class="common-form mt16">订单评价</div> -->
          <!-- <div class="table-wrap"> -->
          <el-table size="small" :data="detail.productComment" border style="width: 100%" stripe>
            <el-table-column prop="commentId" label="ID"></el-table-column>
            <el-table-column prop="productName" label="产品名称"></el-table-column>
            <el-table-column prop="score" label="	评分"></el-table-column>
            <el-table-column prop="content" label="评论内容"></el-table-column>
            <el-table-column prop="image" label="评价图片">
              <template #default="scope">
                <div v-if="scope.row.image && scope.row.image.length > 0">
                  <img :src="item" v-for="(item, index)
                    in scope.row.image" :key="index" style="width: 40px ; height:40px" />
                </div>
              </template>
            </el-table-column>
            <!-- 0-待审核 1-审核通过 2-审核不通过 -->
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag v-if="scope.row.status === 0" type="default">待审核</el-tag>
                <el-tag v-else-if="scope.row.status === 1" type="success">审核通过</el-tag>
                <el-tag v-else type="daner">审核不通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="评论时间"></el-table-column>
            <el-table-column prop="nickName" label="评论人"></el-table-column>
          </el-table>
          <!-- </div> -->
        </el-tab-pane>
      </el-tabs>
      <!-- <div class="common-form mt16">尾款付款截图</div>
      <div class="com-image" v-if="detail.finalFile">
        <img :src="detail.finalFile" />
      </div>

      <div class="common-form mt16">定金付款截图</div>
      <div class="com-image" v-if="detail.depositFile">
        <img :src="detail.depositFile" />
      </div> -->
      <!-- 修改数量财务审核 -->
      <!-- <div style="margin-bottom: 40px;" v-if="detail.isAudit">
        <div class="common-form mt16">财务审核</div>
        <p>
          操作：
          <el-radio-group v-model="cwForm.auditStatus">
            <el-radio :label="2">同意</el-radio>
            <el-radio :label="1">拒绝</el-radio>
          </el-radio-group>
        </p>
      </div> -->
      <!--财务务定金审核 -->
      <!-- <div style="margin-bottom: 40px;" v-if="cwddshShow">
        <div class="common-form mt16">财务审核(定金审核)</div>
        <p>
          操作：
          <el-radio-group v-model="djsh.auditType">
            <el-radio :label="10">同意</el-radio>
            <el-radio :label="20">拒绝</el-radio>
          </el-radio-group>
        </p>
        <p v-if="djsh.auditType === 20">
          拒绝原因:
          <el-input type="textarea" v-model="djsh.auditDesc" />
        </p>
      </div> -->
      <!--财务务尾款 -->
      <!-- <div style="margin-bottom: 40px;" v-if="cwwkshShow">
        <div class="common-form mt16">财务审核(定金审核)</div>
        <p>
          操作：
          <el-radio-group v-model="wkshForm.auditType">
            <el-radio :label="10">同意</el-radio>
            <el-radio :label="20">拒绝</el-radio>
          </el-radio-group>
        </p>
        <p v-if="wkshForm.auditType === 20">
          拒绝原因:
          <el-input type="textarea" v-model="wkshForm.auditDesc" />
        </p>
      </div> -->
      <!-- 审核生成订单审核 -->
      <div style="margin-bottom: 40px;" v-if="detail.createOrderAuditBtn">
        <div class="common-form mt16">订单审核</div>
        <p>
          <span style="color: red;">*</span> 审核意见:
          <el-radio-group v-model="OrderAuditForm.auditType">
            <el-radio :label="10">同意</el-radio>
            <el-radio :label="20">拒绝</el-radio>
          </el-radio-group>
        </p>
        <p v-if="OrderAuditForm.auditType === 20">
          <span style="color: red;">*</span> 拒绝原因:
          <el-input style="width: 60%;" type="textarea" v-model="OrderAuditForm.auditDesc" />
        </p>
      </div>
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">返回上一页</el-button>
        <el-button size="small" v-auth="'/order/order/delivery'" type="primary" v-if="detail.reverseApply"
          @click="applyCounterReview" :loading="applyCounterLoading">申请反审</el-button>
        <!-- 生成订单审核 -->
        <el-button size="small" type="primary" v-if="detail.createOrderAuditBtn" @click="OrderAudit"
          :loading="OrderAuditLoading">订单审核</el-button>

        <el-button size="small" type="primary" :loading="btnLoading" @click="editProduct" v-if="ywyxgShow"
          v-auth="'/order/order/xgsl'">订单修改-业务员保存</el-button>
        <!-- <el-button size="small" type="primary" v-if="cwshShow" @click="editCwAudit" :loading="btnLoading"
          v-auth="'/order/order/cwshsl'">财务审核</el-button> -->
        <el-button size="small" type="danger" v-if="detail.orderButton && detail.orderButton.refundApply"
          @click="returnClick" :loading="btnLoading" v-auth="'/order/order/cwshsl'">退款申请</el-button>
        <el-button size="small" type="success" v-if="detail.orderButton && detail.orderButton.confirmBtn"
          @click="orderClick" :loading="btnLoading">确认订单</el-button>
        <el-button size="small" type="success" @click="showFlowDialog(detail)">下一步流程图</el-button>
        <!-- <el-button size="small" type="primary" v-if="cwddshShow" @click="deposiAudit" :loading="btnLoading"
          v-auth="'/order/order/deposit/audit'">财务审核(定金审核)</el-button>

        <el-button size="small" type="primary" v-if="cwwkshShow" @click="finalAudit" :loading="btnLoading"
          v-auth="'/order/order/final/audit'">财务审核(尾款审核)</el-button> -->
      </div>
      <!-- 退款申请 -->
      <el-dialog title="退款申请" v-model="tkForm.show" top="10vh" width="30%">
        <p>
          退款方式：
          <el-radio-group v-model="tkForm.tkType">
            <el-radio :label="10">全部退款</el-radio>
            <el-radio :label="20">部分退款</el-radio>
            <el-radio :label="30">超额退款</el-radio>
          </el-radio-group>
        </p>
        <p>
          退还方式：

          <el-radio-group v-if="detail.backType == 20" v-model="tkForm.backType">
            <el-radio :label="20">余额退回</el-radio>
            <el-radio :label="30">银行转账</el-radio>

          </el-radio-group>
          <el-radio-group v-else v-model="tkForm.backType">
            <el-radio :label="10">原路退回</el-radio>
            <el-radio :label="20">余额退回</el-radio>
            <el-radio :label="30">银行转账</el-radio>
          </el-radio-group>
        </p>
        <p style="margin-top:5px" v-show="tkForm.tkType === 20 || tkForm.tkType === 30">
          退款金额:
          <el-input-number :coltrols="false" :min="0" v-model="tkForm.tkPrice"></el-input-number>
        </p>
        <p style="margin-top:5px">
          退款原因:
          <el-input type="textarea" v-model="tkForm.reason" placeholder="请填写退款原因"></el-input>
        </p>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="tkCacnle">关闭</el-button>
            <el-button type="primary" :loading="tkLoading" @click="tkSave">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 商品弹出 -->

      <el-dialog title="选择商品" v-model="orderCreate" width="90%" top="5vh">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input size="small" v-model="orderProductForm.productName" placeholder="商品名称查询"
              style="width: 40%; margin: 5px 0px">
              <template #append>
                <el-button type="primary" @click="productSearch">查询</el-button>
              </template>
            </el-input>
            <el-table style="width: 100%" border :data="orderProducts" v-loading="orderProductLoading" max-height="350">
              <el-table-column prop="productName" label="名称" width="180" />
              <el-table-column prop="categoryParentName" label="品种" width="100" />
              <el-table-column prop="categoryName" label="分类" width="100" />
              <el-table-column prop="spec" label="规格" width="300">
                <template #default="scope">{{ scope.row.color }},{{ scope.row.sku }}</template>
              </el-table-column>
              <el-table-column prop="stockNum" label="库存" width="80" />
              <el-table-column prop="minBuyCount" label="最小起订数量" width="150" />
              <el-table-column prop="depositRatio" label="定金比例" width="130" />

              <el-table-column prop="produceAddressTxt" label="种植基地" width="130" />
              <el-table-column prop="num" label="操作" width="100" fixed="right">
                <template #default="scope">
                  <el-button @click="orderPSClick(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageselect">
              <el-pagination background :default-page-size="orderProductForm.pageSize" @current-change="prodcutCurrent"
                layout="prev, pager, next,total" :total="spTotal" />
            </div>
          </el-col>
          <el-col :span="12">
            <p style="margin-top: 20px">已选商品</p>
            <el-table style="width: 100%" border :data="orderSelctProduct" max-height="350">
              <el-table-column prop="productName" label="名称" width="180" />
              <el-table-column prop="categoryParentName" label="品种" width="100" />
              <el-table-column prop="categoryName" label="分类" width="100" />
              <el-table-column prop="spec" label="规格" width="300">
                <template #default="scope">{{ scope.row.color }},{{ scope.row.sku }}</template>
              </el-table-column>
              <el-table-column prop="stockNum" label="库存" width="100" />
              <el-table-column prop="produceAddressTxt" label="种植基地" width="130" />
              <el-table-column prop="minBuyCount" label="最小起订数量" width="150" />
              <el-table-column prop="orderProductType" label="商品类型" width="130">
                <template #default="scope">
                  <el-select v-model="scope.row.orderProductType" placeholder="请选择商品类型">
                    <el-option :label="item1.name" :value="item1.id" v-for="(item1, index1) in orderProductTypeList"
                      :key="index1"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="sl" label="数量" width="100">
                <template #default="scope">
                  <el-input-number :min="scope.row.minBuyCount" v-model="scope.row.sl" :max="scope.row.stockNum"
                    style="width: 95%" :controls="false" />
                </template>
              </el-table-column>
              <el-table-column prop="depositRatio" label="定金比例" width="100">
                <!-- <template #default="scope">
                  <el-tooltip content="请填写小数，如 50% 请填写 0.5">
                    <el-input-number :min="0" :max="1" v-model="scope.row.depositRatio" style="width: 95%"
                      :controls="false" />
                  </el-tooltip>
                </template> -->
              </el-table-column>

              <el-table-column prop="num" label="操作" width="100" fixed="right">
                <template #default="scope">
                  <el-button type="danger" @click="orderPDelete(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="onCreaeOrderCancle">关闭</el-button>
            <el-button type="primary" :loading="orderloading" @click="onCreaeOrderSave">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog title="选择赠品商品" v-model="giftListShow" width="90%" top="5vh">
        <el-table size="small" v-loading="tabLoading" :data="detail.productList" border
          style="width: 100%;height: 300px;">
          <el-table-column prop="imagePath" label="封面">
            <template #default="scope">
              <img :src="scope.row.imagePath" style="width: 60px ; height:60px" />
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="标题" width="300"></el-table-column>
          <el-table-column prop="productAttr" label="规格属性" width="300"></el-table-column>
          <el-table-column prop="productAddress" label="生产部门" width="150"></el-table-column>
          <el-table-column prop="ctl" label="操作" fixed="right" width="100">
            <template #default="scope">
              <el-button type="success" @click="rowGift(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 查看图片 -->
      <el-dialog title="详情大图" v-model="dialogVisibleImg" width="60%" :before-close="handleClose">
        <img style="margin: 0 auto;" :src="dialogVisibleImgUrl" alt="">
      </el-dialog>
      <!-- 变更记录详情查看 -->
      <el-dialog title="变更记录详情" v-model="auditBtnDetailsShow" width="70%" :before-close="handleClose">
        <rowDetail v-if="auditBtnDetailsShow" :rowData="auditBtnRow" @OrderDetailsAudit="OrderDetailsAudit"></rowDetail>
      </el-dialog>
      <!-- 变更历史记录详情查看 -->
      <el-dialog title="历史记录详情" v-model="historyDetailsShow" width="90%" :before-close="handleClose">
        <historyDetail v-if="historyDetailsShow" :rowData="historyRow"></historyDetail>
      </el-dialog>

      <!--上传图片-->
      <Upload v-if="isupload" :isupload="isupload" :type="'image'" :config="{ total: 3 }" @returnImgs="returnImgsFunc">
      </Upload>
      <!-- 付款记录审核 -->
      <el-dialog title="付款记录审核" v-model="rowOrderAuditShow" width="30%" :before-close="handleClose">
        <div style="margin-bottom: 40px;">
          <div class="common-form mt16">订单审核</div>
          <p>
            <span style="color: red;">*</span>审核意见:
            <el-radio-group v-model="OrderAuditForm.auditType">
              <el-radio :label="10">同意</el-radio>
              <el-radio :label="20">拒绝</el-radio>
            </el-radio-group>
          </p>
          <p v-if="OrderAuditForm.auditType === 20">
            <span style="color: red;">*</span>拒绝原因:
            <el-input style="width: 60%;" type="textarea" v-model="OrderAuditForm.auditDesc" />
          </p>
        </div>
        <div style="text-align: center;">
          <el-button type="primary" @click="rowOrderAuditSave()" v-loading="rowLoading">提交</el-button>
        </div>
      </el-dialog>
      <!-- 详情查看 -->
      <el-dialog title="发货单详情" v-model="detailsDrawer" width="80%">
        <detail v-if="detailsDrawer" :rowData="rowDetailData"></detail>
      </el-dialog>
      <!-- 申请反审 -->
      <el-dialog title="申请反审" v-model="FSShow" width="30%" :before-close="handleClose">
        <div style="margin-bottom: 40px;" v-if="FSShow">

          <p>
            <span style="color: red;">*</span>申请反审原因:
            <el-input style="width: 60%;" type="textarea" v-model="desc" />
          </p>
        </div>
        <div style="text-align: center;">
          <el-button type="primary" @click="FSSave()" v-loading="applyCounterLoading">提交</el-button>
        </div>
      </el-dialog>
      <!-- 确认订单 -->
      <el-dialog title="确认订单" v-model="confirmShow" width="80%">

        <el-form v-if="confirmShow" :model="confirmModel" ref="confirmModel" label-width="140px">
          <el-form-item label="订单号" prop="orderNumber">
            <el-input v-model="confirmModel.orderNumber" disabled />
          </el-form-item>
          <el-form-item label="提货时间" prop="pickupTime">
            <el-date-picker v-model="pickupTime" format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 100%;"
              type="date" placeholder="选择日期" @change="onPickupTimeChange()"></el-date-picker>
          </el-form-item>
          <el-divider>
            提货时间
          </el-divider>
          <el-table v-loading="showProductsLoading" size="small" :data="confirmModel.showProducts" border
            style="width: 100%">
            <el-table-column prop="productName" label="标题"></el-table-column>
            <el-table-column prop="productAttr" label="规格属性"></el-table-column>
            <el-table-column prop="totalNum" label="购买数量" width="80"></el-table-column>
            <el-table-column prop="depositPrice" label="已付定金" width="100"></el-table-column>
            <el-table-column prop="expectDeliveryTime" label="预计发货日期"></el-table-column>
            <el-table-column prop="productAddress" label="生产部门" width="100"></el-table-column>
            <el-table-column prop="pickupTime" label="提货时间">
              <template #default="scope">
                <el-date-picker :disabled-date="($event) => disabledBefore($event, scope.row.expectDeliveryTime)"
                  v-model="scope.row.pickupTime" format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width: 100%;"
                  type="date" placeholder="选择日期" @change="onDateChange($event, scope.row)"></el-date-picker>
              </template>
            </el-table-column>
          </el-table>
          <!-- <el-form-item
            label="提货时间"
            prop="pickupTime"
            :rules="[{ required: true, message: '请选择提货时间' }]"
          >
            
          </el-form-item>-->
          <!-- 确认订单 线下支付 -->
          <!-- <div v-show="confirmModel.payType === 40">
            <el-form-item label="付款截图" prop="fileId" :rules="[
              { required: confirmModel.payType === 40, message: '请上传付款截图' },
            ]">
              <el-upload class="avatar-uploader" v-model:fileList="fileList" :auto-upload="false" :limit="1"
                :show-file-list="true">
                <img v-if="imageInfo.imageUrl" style="width: 100px; height: 100px" :src="imageInfo.imageUrl"
                  class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </div> -->
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="orderCancle">关闭</el-button>
            <el-button type="primary" :loading="btnloading" @click="orderSave">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog title="流程审批图" v-model="dialogPicVisible" @close="dialogPicVisible = false"
        :close-on-click-modal="false" :close-on-press-escape="false" width="70%">
        <!--内容-->
        <div>
          <josnToProcess :list="flowInfoList">
            <template #default="{ items }">
              <div class="node_item" style="font-weight: bold;">
                【{{ items.stepName }}】
              </div>
              <div>
                <p v-if="items.auditPerson || items.assignee">审核人: {{ items.auditPerson || items.assignee }}</p>
                <p v-if="items.auditTime">审核时间: {{ items.auditTime }}</p>
                <!-- 0-待审批 10-审批中  20-通过 30-拒绝 -->
                <p v-if="items.status">审核状态: <el-tag :type="items.status == '10' ? 'warning' : items.status == '20' ? 'success' : items.status == '30' ? 'danger' :
                  'info'"> {{ items.status == '10' ? '审批中' : items.status == '20' ? '通过' : items.status == '30' ? '拒绝'
                    :
                    '待审批' }}</el-tag>
                </p>
              </div>
            </template>
          </josnToProcess>
        </div>
      </el-dialog>
      <el-dialog title="操作流程" v-model="flowDialog" width="60%" :before-close="handleClose">
        <nextFlowImg :order="rowDta" :history-steps="historySteps" :current-step="currentStep" :next-steps="nextSteps"
          @branch-action="handleBranchAction"></nextFlowImg>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import OrderApi from "@/api/order.js";
import PorductApi from "@/api/product.js";
import changeAddress from "@/components/order/changeAddress.vue";
import Add from "./dialog/Add.vue";
import Upload from "@/components/file/Upload.vue";
import detail from "@/views/order/shipping/detail.vue";
import nextFlowImg from "./next-flow-img.vue"
import { deepClone } from "@/utils/base.js";
import Logistics from "@/components/logistics/viewLogistics.vue";
import ProductSelect from "@/components/product/deliveryProduct.vue";
import { ElMessage } from "element-plus";
import rowDetail from "./row-detail.vue"
import historyDetail from "./history-detail.vue"
import josnToProcess from "@/components/flow-pic.vue"

export default {
  components: {
    ProductSelect,
    Add,
    changeAddress,
    Logistics,
    rowDetail,
    Upload, detail, historyDetail,
    josnToProcess,
    nextFlowImg
  },
  data() {
    return {
      productComment: [], //订单评价
      CalcData: {},
      desc: '',
      FSShow: false,
      historyDetailsShow: false,
      historyRow: {},
      rowOrderAuditShow: false,
      detailsDrawer: false,
      rowDetailData: {},
      rowOrderAuditRow: {},
      rowLoading: false,
      btnloading: false,
      dialogPicVisible: false,
      flowInfoList: [],
      isupload: false,
      pickupTime: '',
      confirmModel: {
        orderNumber: "",
        orderId: "",
        pickupTime: "",
        payType: 0,
        fileId: "",
        paySource: "", //线下支付渠道
        payTime: "", //线下支付时间
        tradeNo: "", //线下支付流水号
        showProducts: [],
        products: [],
      },
      showProductsLoading: false,
      confirmShow: false,
      applyCounterLoading: false,
      orderProductTypeList: [
        {
          name: '销售',
          id: 10
        },
        {
          name: '赠品',
          id: 20
        },
        {
          name: '赔付',
          id: 30
        }
      ],
      OrderAuditForm: {
        auditType: '',
        auditDesc: ''
      },
      auditBtnRow: {},
      remark: '',
      OrderAuditLoading: false,
      activeName: 'sp',
      giftListShow: false,
      dialogVisibleImg: false,
      dialogVisibleImgUrl: '',
      tabLoading: false,
      auditBtnDetailsShow: false,
      // 赠品
      giftProduct: [],
      // 优惠券记录
      couponList: [],
      // 优惠券信息
      userCouponVo: {
        couponId: ''
      },
      djsh: {
        orderId: '',
        auditType: 10,
        auditDesc: ''
      },
      wkshForm: {
        orderId: '',
        auditType: 10,
        auditDesc: ''
      },
      detail: {},
      loading: false,
      statusArry: [10, 20, 30], // 10待支付  20 待确认 30 待付尾款 
      btnLoading: false,
      cwForm: {
        auditStatus: 2, //拒绝 2 同意
        orderId: '',
        reason: ''
      },
      tkForm: {
        show: false,
        tkPrice: 0,
        tkType: 10,
        backType: 20,
        reason: ''
      },
      tkLoading: false,
      pageType: '',
      slEdit: false,
      djblEdit: false,
      ywyxgShow: false,
      cwshShow: false,
      cwtkShow: false,
      cwddshShow: false,
      cwwkshShow: false,
      orderProductForm: {
        pageIndex: 1,
        pageSize: 5,
        productName: "",
      },
      orderProductLoading: false,
      spTotal: 0,
      orderSelctProduct: [],
      orderCreate: false,
      uploadCredentialsRow: {},
      fromPageType: '',
      historySteps: [],
      currentStep: null,
      nextSteps: [],
      flowDialog: false,
      rowDta: {}

    };
  },
  created() {
    const id = this.$route.query.id
    this.pageType = this.$route.query.tk
    this.fromPageType = this.$route.query.type
    this.loadDetail(id)

  },
  methods: {
    showPic() {
      this.dialogPicVisible = true;
    },
    // 下一步流程图
    showFlowDialog(row) {
      console.log(row, '详情返回的')
      this.flowDialog = true;
      // 模拟API请求，实际应该从后端获取
      // 这里仅作为示例数据
      OrderApi.orderOperate({ orderId: row.orderId }).then(res => {
        const { code, data } = res;
        console.log(code, data)
        // 历史步骤
        this.rowDta = row;
        this.historySteps = data.history
        this.currentStep = data.current
      })


      // 下一步可能的分支
      this.nextSteps = [
        // {
        //   id: 'ship',
        //   title: '发货',
        //   description: '商家将订单商品打包并发货',
        //   type: 'normal',
        //   typeText: '标准流程',
        //   conditions: '库存充足，地址有效',
        //   canExecute: true,
        //   actionText: '发货'
        // }
      ];
    },
    handleBranchAction() {

    },
    orderClick() {
      // 调用列表的确认订单
      console.log(this.detail, '3333')
      const $this = this;
      $this.confirmModel.orderId = this.detail.orderId;
      $this.confirmModel.orderNumber = this.detail.orderNo;
      $this.confirmModel.payType = this.detail.payType;
      //$this.confirmModel
      $this.loadOrderDetail();
      this.pickupTime = null;
      $this.confirmShow = true;
    },
    onPickupTimeChange() {

      // 外面选择了日期可以同步到列表里面
      this.confirmModel.showProducts.map(val => {
        val['pickupTime'] = this.pickupTime
        const currnetTime = new Date(val.pickupTime);
        const afterTime = new Date(val.expectDeliveryTime);
        if (currnetTime.getTime() < afterTime.getTime()) {
          ElMessage.error("选择的日期不能小于预计发货日期");
          this.pickupTime = ''
          val.pickupTime = ''
        }
      })
    },
    orderSave() {

      const $this = this;
      //验证提货时间
      let isValidate = true;
      const products = this.confirmModel.showProducts
      const newProducts = []
      for (let i = 0; i < products.length; i++) {
        const row = products[i]
        if (!row.pickupTime) {
          ElMessage.error("请选择提货时间");
          isValidate = false
          break;
        }

        newProducts.push({
          orderProductId: row.orderProductId,
          pickupTime: row.pickupTime
        })
      }

      if (isValidate) {
        $this.btnloading = true;
        $this.confirmModel.products = newProducts
        OrderApi.confirmOrder($this.confirmModel, true)
          .then((result) => {
            const { code, msg } = result;
            if (code === 1) {
              ElMessage.success(msg);
              $this.orderCancle();
              $this.loadDetail($this.$route.query.id)

            } else {
              ElMessage.error(msg);
            }
            $this.btnloading = false;
          })
          .catch((error) => {
            $this.btnloading = false;
          });
      }
    },
    onDateChange($event, row) {
      const currnetTime = new Date($event);
      const afterTime = new Date(row.expectDeliveryTime);
      if (currnetTime.getTime() < afterTime.getTime()) {
        ElMessage.error("发货时间不能小于预计发货时间");
        row.pickupTime = ''
        return
      }
    },
    orderCancle() {
      this.confirmModel.orderId = "";
      this.confirmModel.pickupTime = "";
      this.confirmModel.orderNumber = "";
      this.confirmModel.tradeNo = "";
      this.confirmModel.paySource = "";
      this.confirmModel.payTime = "";
      this.confirmModel.payType = 0;

      this.confirmShow = false;
    },
    disabledBefore(time, oldTime) {
      console.log(time, oldTime, '3456')
      // 设定不能选择的指定时间，比如2023年1月1日
      const limitTime = new Date(oldTime).getTime();
      return time.getTime() <= limitTime;
    },
    async loadOrderDetail(row) {
      const $this = this;
      const id = $this.confirmModel.orderId;
      this.showProductsLoading = true;
      const { code, data } = await OrderApi.getOrderDetail(id, true);
      if (code === 1) {
        this.showProductsLoading = false
        $this.confirmModel.showProducts = data.productList;
      } else {
        this.showProductsLoading = false
      }
    },
    // 申请反审
    applyCounterReview() {
      this.FSShow = true;
    },
    FSSave() {

      this.applyCounterLoading = true;
      OrderApi.modifyApply({ orderId: this.detail.orderId, desc: this.desc }, true).then(res => {
        const { code, data } = res;
        console.log(data, 'data+++++')
        if (code == 1) {
          ElMessage.success("提交成功");
          this.applyCounterLoading = false
          this.FSShow = false;
          this.loadDetail(this.$route.query.id)
        }
        this.applyCounterLoading = false
      }).catch(e => {
        this.applyCounterLoading = false

      })
    },
    async copyLink(linkText) {
      const $this = this;
      await $this.$copyText(linkText);
      ElMessage.success("复制成功");
    },
    // 变更查看历史
    historyDetails(row) {
      OrderApi.modifyHistory({ modifyId: row.id }).then(res => {
        const { code, data } = res;
        console.log(data, 'data+++++')
        if (code == 1) {
          this.historyDetailsShow = true;
          this.historyRow = data;
        }
      })
    },
    fhDetails(row) {
      // 发货详情
      this.rowDetailData = row;
      this.detailsDrawer = true
    },
    /*关闭选择图片*/
    returnImgsFunc(e) {
      console.log(e, 'eee')
      this.isupload = false;
      if (e != null && e.length > 0) {
        let image = e[0].filePath;
        let fileId = e[0].fileId;
        this.uploadCredentialsRow.rowLoading = true;
        PorductApi.billConfirm({ billId: this.uploadCredentialsRow.billId, fileId: fileId }, true).then(res => {
          const { code, data } = res;
          if (code == 1) {
            ElMessage({
              message: '上传成功',
              type: 'success'
            });
            this.loadDetail(this.$route.query.id)
          }
          this.uploadCredentialsRow.rowLoading = false;
        }).catch(e => { })
        this.uploadCredentialsRow.rowLoading = false;

      }
    },

    // 确认上传凭证
    uploadCredentials(row) {
      this.uploadCredentialsRow = row;
      this.isupload = true;
    },
    /*关闭*/
    cancelRow: function (row) {
      let self = this;

      PorductApi.flowCancel({
        orderFlowId: row.orderFlowId
      }).then(data => {
        ElMessage({
          message: '关闭成功',
          type: 'success'
        });
        self.loadDetail(id)
      });

    },
    OrderDetailsAudit() {
      this.auditBtnDetailsShow = false;
      this.loadDetail(this.$route.query.id)

    },
    // 变更记录详情查看
    auditBtnDetails(row) {
      this.auditBtnRow = row;
      this.auditBtnDetailsShow = true;
    },
    handleClick() { },
    viewImg(row) {
      this.dialogVisibleImgUrl = row.payFilePath;
      this.dialogVisibleImg = true;
    },
    viewImg1(row) {
      this.dialogVisibleImgUrl = row.imagePath;
      this.dialogVisibleImg = true;
    },
    buildFiledStatus(order) {

      const type = this.$route.query.tk
      console.log('订单信息', order)
      if (type === 'view') {
        //只要是详情进入的，所有都是只读
        this.slEdit = true
        //this.djblEdit =true 
        this.ywyxgShow = false
        this.cwshShow = false
        this.cwddshShow = false
        this.cwwkshShow = false
      }
      if (type === 'tz') {
        this.ywyxgShow = true

        //业务员调整订单
        if (order.status === 10) {
          //待付款状态 
          this.slEdit = false
          this.djblEdit = false
          // this.ywyxgShow = true
          this.cwshShow = false
          this.cwtkShow = false
          this.cwddshShow = false
          this.cwwkshShow = false
        }
        if (order.status === 20) {
          //待确认
          this.djblEdit = true
          this.slEdit = false
          // this.ywyxgShow = true
          this.cwshShow = false
          this.cwtkShow = false
          this.cwwkshShow = false
          this.cwddshShow = false
        }
        if (order.status === 30) {
          //待付尾款
          this.djblEdit = true
          this.slEdit = false
          // this.ywyxgShow = true
          this.cwshShow = false
          this.cwtkShow = false
          this.cwddshShow = false
          this.cwwkshShow = false
        }
      }
      if (type === 'sh') {
        //财务审核
        if (order.status === 20) {
          //待确认
          //   this.djblEdit = true 
          this.slEdit = true
          this.ywyxgShow = false
          this.cwshShow = true
          this.cwtkShow = false
          this.cwddshShow = false
          this.cwwkshShow = false
        }
        if (order.status === 30) {
          //待付尾款
          // this.djblEdit = true 
          this.slEdit = true
          this.ywyxgShow = false
          this.cwshShow = true
          this.cwtkShow = false
          this.cwddshShow = false
          this.cwwkshShow = false
        }

      }
      if (type === 'tk') {
        this.slEdit = true
        // this.djblEdit =true 
        this.ywyxgShow = false
        this.cwshShow = false
        this.cwtkShow = true
        this.cwddshShow = false
        this.cwwkshShow = false
      }
      if (type === 'ddsh') {
        this.slEdit = true
        this.cwwkshShow = false
        if (order.status === 20) {
          this.cwddshShow = true
        } else {
          this.cwddshShow = false
        }
      }
      if (type === 'cwwksh') {
        this.slEdit = true
        if (order.status === 30) {
          this.cwwkshShow = true
        }

      }
    },
    goBack() {
      const $this = this
      setTimeout(() => {
        $this.$router.back()
      }, 1000);

    },
    caclueNumber(row) {
      if (row.afterBuyNum && row.afterBuyNum > 0) {
        return row.afterBuyNum - row.yfhsl
      } else {
        return row.gmsl - row.yfhsl
      }
    },
    loadDetail(id) {
      const $this = this
      $this.loading = true
      OrderApi.getOrderDetail(id, true)
        .then(result => {

          $this.loading = false
          const { code, data } = result
          if (code === 1) {
            $this.buildFiledStatus(data)
            console.log('data', data)
            Object.assign($this.detail, data)
            $this.flowInfoList = $this.flowInfoListFunc($this.detail.flowInfoList)
            //联系地址
            if (data.deliveryType === 20 &&
              data.extractStore
            ) {
              $this.detail.city = data.extractStore.address
              $this.detail.adressDetail = data.extractStore.storeName
              $this.detail.name = data.extractStore.extractName
              $this.detail.phone = data.extractStore.extractPhone
            } else {
              if (data.address) {
                const region = data.address.region
                if (region) {
                  $this.detail.city =
                    `${region.province}/${region.city}/${region.region}`
                }
                $this.detail.adressDetail = data.address.detail
                $this.detail.name = data.address.name
                $this.detail.phone = data.address.phone
              }
            }

            $this.detail.deliveryList = []
            if (data.deliveryList)
              $this.detail.deliveryList = data.deliveryList
            if (data.productList) {
              $this.detail.productList = []
              data.productList.map(item => {
                if (item.isGift == 0) {
                  let obj = {
                    ...item,
                    gmsl: item.totalNum,
                    buyNum: item.totalNum,
                    sysl: (item.totalNum) - (item.deliveryCount || 0),
                    yfhsl: item.deliveryCount || 0,
                    depositPrice: item.depositRatio

                  }
                  $this.detail.productList.push(obj)
                } else if (item.isGift == 1) {
                  // 拆分商品和赠品 0-非赠品 1-赠品
                  $this.giftProduct.push(item)
                }
              })
            }
            // 如果userCouponList 有就需要调计算接口
            if (data.userCouponList) {
              this.detail.userCouponId = data.userCouponList.userCouponId
              this.orderModifyCalc()
            }
            // 修改内容赋值
            this.remark = this.detail.remark;


          }
        }).catch(error => {
          $this.loading = false
        })
    },
    // 流程图审批数据结构
    flowInfoListFunc(flowInfoList = []) {
      let Arr = [{
        stepName: '订单审批流程图',
        children: []
      }]
      if (flowInfoList && flowInfoList.length) {
        flowInfoList.map((val, index) => {
          val['id'] = index++;
          if (val.nodeList && val.nodeList.length == 1) {
            val['auditPerson'] = val.nodeList[0].auditPerson
            val['assignee'] = val.nodeList[0].assignee
            val['auditTime'] = val.nodeList[0].auditTime
            val['status'] = val.nodeList[0].status
          } else {
            val.nodeList.map((item, dex) => {
              item['id'] = index++ + '-' + dex++
              item['stepName'] = item.nodeName
            })
            val['children'] = val.nodeList
          }
        })
        Arr[0].children = flowInfoList
        console.log(Arr, 'Arr')

        return Arr
      }
    },
    cancelFunc() {
      if (this.fromPageType == 'ZD') {
        this.$router.push({ path: '/wallet/index', replace: true })

      } else if (this.fromPageType == 'FP') {
        this.$router.push({ path: '/invoice/list/index', replace: true })

      } else {
        this.$router.push({ path: '/order/order/index', replace: true })

      }
    },
    rowOrderAudit(row) {
      this.rowOrderAuditShow = true;
      this.rowOrderAuditRow = row;
    },
    // 付款记录审核
    rowOrderAuditSave() {
      if (!this.OrderAuditForm.auditType) {
        ElMessage.warning('请选择审核意见')
        return;
      }
      if (this.OrderAuditForm.auditType == 20 && !this.OrderAuditForm.auditDesc) {
        ElMessage.warning('请输入拒绝原因')
        return;
      }
      let Obj = {
        orderId: this.rowOrderAuditRow.orderId,
        orderFlowId: this.rowOrderAuditRow.orderFlowId,
        auditType: this.OrderAuditForm.auditType,
        auditDesc: this.OrderAuditForm.auditDesc,
      }
      this.rowLoading = true
      OrderApi.orderAuditV2(Obj).then(result => {
        this.rowLoading = false
        const { code, msg } = result
        if (code === 1) {
          ElMessage.success(msg)
          this.rowOrderAuditShow = false;
          this.loadDetail(this.$route.query.id)
        } else {
          ElMessage.error(msg)
        }
      }).catch(error => {
        this.rowLoading = false
      })
    },
    // 订单审核
    OrderAudit() {
      if (!this.OrderAuditForm.auditType) {
        ElMessage.warning('请选择审核意见')
        return;
      }
      if (this.OrderAuditForm.auditType == 20 && !this.OrderAuditForm.auditDesc) {
        ElMessage.warning('请输入拒绝原因')
        return;
      }
      let Obj = {
        orderId: this.detail.orderId,
        orderFlowId: this.detail.orderFlowId,
        auditType: this.OrderAuditForm.auditType,
        auditDesc: this.OrderAuditForm.auditDesc,
      }
      this.OrderAuditLoading = true
      OrderApi.orderAuditV2(Obj).then(result => {
        this.OrderAuditLoading = false
        const { code, msg } = result
        if (code === 1) {
          ElMessage.success(msg)
          this.loadDetail(this.$route.query.id)
        } else {
          ElMessage.error(msg)
        }
      }).catch(error => {
        this.OrderAuditLoading = false
      })
    },
    editProduct() {
      //构建商品
      const $this = this
      // const id = this.$route.query.id
      // const productList = $this.detail.productList.map(item => {
      //   return {
      //     buyNum: item.gmsl,
      //     depositRatio: item.depositPrice,
      //     orderProductId: item.orderProductId || '',
      //     productSkuId: item.productSkuId
      //   }
      // })
      if (!this.remark) {
        return ElMessage.warning('请完善修改的内容记录!')
      }
      let Obj = {
        orderId: this.detail.orderId,
        couponId: this.detail.userCouponId,
        userId: this.detail.userId,
        remark: this.remark,
        productParams: this.detail.productList,
        giftProduct: this.giftProduct[0]

      }
      $this.btnLoading = true
      OrderApi.updateOrderNums({
        ...Obj
        // fix 之前的参数
        // orderId: parseInt(id),
        // productParams: productList

      }, true)
        .then(result => {
          $this.btnLoading = false
          const { code, msg } = result
          if (code === 1) {
            ElMessage.success('提交成功！')
            $this.goBack()
            // $this.loadDetail(id)
          } else {
            ElMessage.error(msg)
          }
        }).catch(error => {

          $this.btnLoading = false
        })
    },
    editCwAudit() {
      const $this = this
      const id = this.$route.query.id
      const getBody = {
        auditStatus: $this.cwForm.auditStatus,
        orderId: id
      }
      console.log('财务审核', getBody)
      $this.btnLoading = true
      OrderApi.updateOrderNumCwAudit(getBody, true)
        .then(result => {
          $this.btnLoading = false
          const { code, msg } = result
          if (code === 1) {
            ElMessage.success(msg)
            $this.goBack()
          } else {
            ElMessage.error(msg)
          }
        }).catch(error => {
          $this.btnLoading = false
        })

    },
    returnClick() {
      this.tkForm.show = true
    },
    tkSave() {
      const $this = this
      const id = $this.$route.query.id
      const postbody = {
        all: $this.tkForm.tkType === 10 ? true : false,
        refundPrice: $this.tkForm.tkPrice,
        orderId: parseInt(id),
        reason: $this.tkForm.reason,
        backType: $this.tkForm.backType,
        moneyType: $this.tkForm.tkType
      }
      if (!postbody.all && Number(postbody.refundPrice) <= 0) {
        ElMessage.error('请输入退款金额')
        return
      }
      if (!postbody.reason) {
        ElMessage.error('请输入退款原因')
        return
      }

      if (postbody.all)
        postbody.refundPrice = 0
      $this.tkLoading = true
      OrderApi.refundApply(postbody, true)
        .then(result => {
          $this.tkLoading = false
          const { code, msg } = result
          if (code === 1) {
            ElMessage.success(msg)
            $this.tkCacnle()
            // $this.loadDetail(postbody.orderId)
            $this.goBack()
          } else {
            ElMessage.error(msg)
          }
        }).catch(error => {
          $this.tkLoading = false
        })
    },
    tkCacnle() {
      this.tkForm.show = false
      this.tkForm.tkPrice = 0
      this.tkForm.reason = ''
    },
    //财务定金审核
    deposiAudit() {
      const $this = this
      const id = $this.$route.query.id
      $this.djsh.orderId = id
      if ($this.djsh.auditType === 20 && !$this.djsh.auditDesc) {
        ElMessage.error('请输入拒绝原因')
        return
      }
      OrderApi.deposiAudit($this.djsh, true)
        .then(result => {
          const { code, msg } = result
          if (code === 1) {
            ElMessage.success(msg)
            $this.loadDetail(id)
          } else {
            ElMessage.error(msg)
          }
        }).catch(error => {
          ElMessage.error('审核失败')
        })
    },
    //财务尾款审核
    finalAudit() {
      const $this = this
      const id = $this.$route.query.id
      $this.wkshForm.orderId = id
      if ($this.wkshForm.auditType === 20 && !$this.wkshForm.auditDesc) {
        ElMessage.error('请输入拒绝原因')
        return
      }
      OrderApi.finalsiAudit($this.wkshForm, true)
        .then(result => {
          const { code, msg } = result
          if (code === 1) {
            ElMessage.success(msg)
            $this.loadDetail(id)
          } else {
            ElMessage.error(msg)
          }
        }).catch(error => {
          ElMessage.error('审核失败')
        })
    },
    handlerRemove(index) {
      this.detail.productList.splice(index, 1)
      setTimeout(() => {
        this.detail.userCouponId = '';
        this.giftProduct = ""
        this.orderModifyCalc();
      }, 500)
    },
    onSpSelect() {
      this.loadProducts()
      this.orderCreate = true
    },
    loadProducts() {
      const $this = this;
      $this.orderProductLoading = true;
      OrderApi.getSkuProducts($this.orderProductForm, true)
        .then((result) => {
          const { code, data } = result;
          if (code === 1) {
            $this.orderProducts = data.records;
            $this.spTotal = data.total;
          }
          $this.orderProductLoading = false;
        })
        .catch((error) => {
          $this.orderProductLoading = false;
        });
    },
    productSearch() {
      this.orderProductForm.pageIndex = 1;
      this.loadProducts();
    },
    prodcutCurrent(index) {
      this.orderProductForm.pageIndex = index;
      this.loadProducts();
    },
    //已选商品删除
    orderPDelete(index) {
      this.orderSelctProduct.splice(index, 1);
    },
    onCreaeOrderCancle() {
      this.orderSelctProduct = [];
      this.orderCreate = false;
    },
    onCreaeOrderSave() {
      const defaultProducts = this.detail.productList
      const orderProducts = this.orderSelctProduct
      const newProducts = [...defaultProducts]
      orderProducts.forEach((item) => {
        const defualtitem = defaultProducts.find(f => f.productSkuId === item.productSkuId)
        if (!defualtitem) {
          newProducts.push({
            productName: item.productName,
            categoryParentName: item.categoryParentName,
            categoryName: item.categoryName,
            productAttr: item.productAttr,
            productId: item.productId,
            minBuyCount: item.minBuyCount,
            orderProductType: item.orderProductType,
            gmsl: item.sl,
            buyNum: item.sl,
            productNo: item.sku,
            color: item.color,
            stockNum: item.stockNum,
            productAddress: item.produceAddressTxt,
            depositPrice: item.depositRatio,
            imagePath: item.imagePath,
            expectDeliveryTime: item.sendDate,
            yfhsl: 0,
            afterBuyNum: 0,
            deliveryNum: 0,
            totalNum: item.sl,
            productSkuId: item.productSkuId
          })
        }
      })

      this.detail.productList = newProducts
      this.orderCreate = false;
      // 调用接口 计算
      this.orderModifyCalc();
    },
    // 选择商品券弹窗选择商品
    selCouponType(val) {

      console.log(val, 'val-----')
      let row = {}
      this.couponList.map(item => {
        if (item.userCouponId == val) {
          row = item
        }
      })
      if (row.couponType == 40) {
        // 商品券需要选择商品
        this.giftListShow = true;
      } else {
        this.selCoupon()
      }
    },
    rowGift(row) {
      this.giftListShow = false;
      this.giftProduct = [row]
      this.selCoupon()
    },
    // 选择优惠券 编辑数量
    selCoupon() {
      this.$forceUpdate();
      this.detail.productList = JSON.parse(JSON.stringify(this.detail.productList))
      this.detail.productList.map(val => {
        val.buyNum = val.gmsl;
      })
      this.$nextTick(() => {
        this.orderModifyCalc();
      })
    },
    // 计算接口
    orderModifyCalc() {
      if (this.detail.productList.length == 0) {
        return false;
      }
      let Obj = {
        orderId: this.detail.orderId,
        couponId: this.detail.userCouponId,
        userId: this.detail.userId,
        productParams: this.detail.productList,
        giftProduct: this.giftProduct[0]
      }
      this.tabLoading = true
      OrderApi.orderModifyCalc(Obj, true).then(res => {
        const { code, data, msg } = res;
        this.tabLoading = false
        if (code == 1) {
          console.log(data, 'data')
          this.couponList = [];
          this.CalcData = data;
          this.couponList = data.couponList;
          // this.giftProduct = []
          data.userCouponVo && (this.detail.userCouponId = data.userCouponVo.userCouponId)
          // 赠品
          if (data.giftProduct) {
            this.giftProduct = [data.giftProduct];
          }
          // 商品信息
          if (data.productList) {
            this.detail.productList.map(val => {
              data.productList.map(item => {
                if (val.productId == item.productId) {
                  val.couponPrice = item.couponPrice
                  val.depositPrice = item.depositPrice
                  val.packagePrice = item.packagePrice
                  val.totalPayPrice = item.totalPayPrice
                  val.finalPrice = item.finalPrice
                }
              })
            })
          }
          // 强制刷新
          this.couponList = JSON.parse(JSON.stringify(this.couponList))
          this.userCouponVo = JSON.parse(JSON.stringify(this.userCouponVo))
        } else {
          return ElMessage.error(msg);
        }

      }).catch(e => {
        this.tabLoading = false

      })
    },
    orderPSClick(row) {
      // if (row.stockNum == 0) {
      //   return ElMessage.error("该商品库存为0,请重新选择");
      // }
      const $this = this;
      if ($this.orderSelctProduct.length > 0) {
        // const adress = $this.orderSelctProduct.find(
        //   (f) => f.produceAddress !== row.produceAddress
        // );
        // if (adress) {
        //   ElMessage.error("请选择相同基地的商品");
        //   return;
        // }

        const model = $this.orderSelctProduct.find(
          (f) => f.productSkuId === row.productSkuId
        );
        if (!model) {
          $this.orderSelctProduct.push({
            productSkuId: row.productSkuId,
            productName: row.productName,
            categoryName: row.categoryName,
            productId: row.productId,
            categoryParentName: row.categoryParentName,
            sl: row.minBuyCount, //默认最小起订数量
            color: row.color,
            minBuyCount: row.minBuyCount,
            sku: row.sku,
            imagePath: row.imagePath,
            orderProductType: row.orderProductType || 10,
            productAttr: row.productAttr,
            stockNum: parseInt(row.stockNum),
            depositRatio: Number(row.depositRatio),
            produceAddress: row.produceAddress,
            produceAddressTxt: row.produceAddressTxt,
            sendDate: row.sendDate
          });
        } else {
          ElMessage.error("此商品重复");
        }
      } else {
        $this.orderSelctProduct.push({
          productSkuId: row.productSkuId,
          productName: row.productName,
          categoryName: row.categoryName,
          productId: row.productId,
          categoryParentName: row.categoryParentName,
          sl: row.minBuyCount, //默认最小起订数量
          imagePath: row.imagePath,
          productAttr: row.productAttr,
          orderProductType: row.orderProductType || 10,
          minBuyCount: row.minBuyCount,
          depositRatio: Number(row.depositRatio),
          color: row.color,
          sku: row.sku,
          stockNum: parseInt(row.stockNum),
          produceAddress: row.produceAddress,
          produceAddressTxt: row.produceAddressTxt,
          sendDate: row.sendDate
        });
      }
      console.log("选择", row);
    },
  },

};
</script>
<style scoped>
/deep/.el-radio-group {
  vertical-align: middle !important;
}
</style>
<style lang="scss" scoped>
.package-pre {
  height: var(--el-component-size-small);
  line-height: var(--el-component-size-small);
  font-weight: bold;
}

.calc-data-css {
  span {
    font-weight: bold;
    color: #333;
  }
}

.delete-icon {
  font-size: 20px;
}

.list {
  display: flex;
  margin-top: 20px;
  overflow: hidden;
  list-style: none;
  padding: 0;

  .item {
    flex: none;
    width: 200px;
    font-size: 14px;
    line-height: 14px;
    color: rgba(0, 0, 0, 0.85);

    .title {
      margin-bottom: 12px;
      font-size: 13px;
      line-height: 13px;
      color: #666666;
    }

    .value1 {
      color: #f56022;
    }

    .value2 {
      color: #1bbe6b;
    }

    .value3 {
      color: var(--prev-color-primary);
    }

    .value4 {
      color: #6a7b9d;
    }

    .value5 {
      color: #f5222d;
    }
  }
}

.img {
  width: 100%;
  height: 100%;
}

.com-image {
  width: 60%;
  height: 300px;
  border: 1px solid #f0f0f0;
  margin-bottom: 10px;
}
::v-deep(.el-scrollbar__bar.is-horizontal) {
  height: 20px;          /* 想多粗就写多大 */
}
</style>
